<template>
  <div>
    <el-dialog v-dialogDrag
      title="编辑用户"
      :visible="editShow"
      width="40%"
      @close="dialogClose"
    >
      <el-form
        ref="editForm"
        :model="formFileds"
        :rules="rules"
        label-width="auto"
      >
        <!-- <el-form-item label="权限名称：" prop="role">
          <el-input type="text" v-model="formFileds.role"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="权限描述：" prop="describe">
          <el-input
            type="textarea"
            :rows="3"
            v-model="formFileds.describe"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="职位：" prop="roleId">
          <el-select v-model="formFileds.roleId" clearable>
            <el-option 
              v-for="(item,index) in roles"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
          </el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="资质证书：" prop="userZzzs">
            <el-upload class="avatar-uploader" :action="actionZzzs" list-type="picture-card" 
            :show-file-list="false" :on-success="zzzshandleAvatarSuccess">
              <div class="box">
                <img v-if="zzzsUrl" :src="zzzsUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
        <el-form-item label="备注：" prop="remark">
          <el-input
            type="textarea"
            :rows="2"
            v-model="formFileds.remark"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm()"
            class="pull-right margin-l-25"
            >确定
          </el-button>
          <el-button @click="dialogClose" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { updateUser, getRoles } from "@/api/user/userManage";

export default {
  //接受父组件
  props: {
    editShow: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },

  data() {
    return {
      roles:[],
      formFileds: {},
      roleOptions:[],
      actionZzzs: '/api/user/userZzzsUpload',
      zzzsUrl:'',
      rules: {
        // title: [
        //   {
        //     required: true,
        //     message: "请输入权限名称",
        //     trigger: "blur",
        //   },
        // ],
        // describe: [
        //   {
        //     required: true,
        //     message: "请输入权限描述",
        //     trigger: "blur",
        //   },
        // ],
        role: [
          {
            required: true,
            message: "请选择角色",
            trigger: "change,blur",
          },
        ],
        remark: [
          {
            required: false,
            message: "备注",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    dialogClose() {
      this.$emit("dialogClose");
    },
    zzzshandleAvatarSuccess (file) {
            this.zzzsUrl = file.data;
            this.formFileds.userZzzs = this.zzzsUrl;
    },
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$delete(this.formFileds, "createTime");
          if (this.formFileds.status == true) {
            this.formFileds.status = 0;
          } else {
            this.formFileds.status = 1;
          }
          updateUser(this.formFileds).then((res) => {
            this.$emit("close");
            this.$emit('dialogClose');
          });
        } else {
          return;
        }
      });
    },
    getRoles() {
      getRoles().then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          this.roles.push({
            label: res.data[i].name,
            value: res.data[i].id,
          });
        }
      });
    }
  },
  mounted() {
    this.formFileds = Object.assign({},this.record);
    this.zzzsUrl=this.record.userZzzs
    this.getRoles();
  },
};
</script>

<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}

.avatar {
    width: 146px;
    height: 146px;
    object-fit: contain;
    display: block;
}
</style>
